import React, { useMemo, useCallback } from 'react';
import Select, { components } from 'react-select';
import useFormStore from 'src/context/usetypeformstore';
import './style.scss';

const CustomSelect = React.memo(
    ({
        formType,
        fieldName,
        options,
        placeholder = '请选择...',
        className = '',
        isSearchable = true,
        isClearable = false,
        disabled = false,
        height = 44,
        dropdownicon = 'https://img.alicdn.com/imgextra/i3/O1CN01oCSuDy1PAuN5OwQnF_!!6000000001801-55-tps-20-20.svg',
        value: externalValue,
        onChange: externalOnChange,
    }) => {
        const { setFormData } = useFormStore();
        const state = useFormStore();

        const formData = formType ? state[formType] : null;

        const selectedValue = useMemo(() => {
            if (externalValue !== undefined) {
                return externalValue;
            }

            if (formType && fieldName && formData && options) {
                const currentValue = formData[fieldName];
                return options.find((option) => option.value === currentValue);
            }

            return null;
        }, [externalValue, formType, fieldName, formData, options]);

        const handleChange = useCallback(
            (selectedOption) => {
                if (externalOnChange) {
                    externalOnChange(selectedOption);
                    return;
                }

                if (formType && fieldName) {
                    setFormData(formType, {
                        [fieldName]: selectedOption.value,
                    });
                }
            },
            [externalOnChange, formType, fieldName, setFormData]
        );

        const selectStyles = {
            control: (base) => ({
                ...base,
                border: 'none',
                boxShadow: 'none',
                minHeight: `${height}px`,
                backgroundColor: ' #17171B;',
                borderRadius: '0px',
            }),
            dropdownIndicator: (base) => ({
                ...base,
                padding: '10px',
            }),
            clearIndicator: (base) => ({
                ...base,
                padding: '10px',
            }),
            option: (base, { isFocused, isSelected }) => ({
                ...base,
                backgroundColor: isSelected
                    ? '#161417'
                    : isFocused
                    ? '#161417!important'
                    : undefined,
                color: isSelected ? '#4C1BFF' : '#8D8D8F',
                height: `${height}px`,
                lineHeight: `${height - 16}px`,
                paddingLeft: '20px',
                paddingRight: '20px',
                curor: 'pointer',
                fontSize: '14px',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                ':active': {
                    // 添加这一部分
                    backgroundColor: '#161417!important',
                },
            }),
            singleValue: (provided) => ({
                ...provided,
                color: '#8F91A8',
                fontFamily: 'Roboto',
                fontSize: '13px',
                fontWeight: '500',
            }),
            menu: (base) => ({
                ...base,
                backgroundColor: '#100F11',
                borderRadius: '0px',
                zIndex: 9999, // 高 z-index 确保在最上层
            }),
            menuList: (base) => ({
                ...base,
                maxHeight: '200px',
            }),
        };

        const CustomDropdownIndicator = (props) => {
            return (
                <components.DropdownIndicator {...props}>
                    <img src={dropdownicon} alt="" />
                </components.DropdownIndicator>
            );
        };

        return (
            <Select
                options={options}
                value={selectedValue}
                onChange={handleChange}
                placeholder={placeholder}
                className={`custom-select ${className}`}
                classNamePrefix="select"
                isSearchable={isSearchable}
                isClearable={isClearable}
                isDisabled={disabled}
                components={{ DropdownIndicator: CustomDropdownIndicator }}
                styles={selectStyles}
                menuPortalTarget={document.body} // 将菜单渲染到 body
                menuPosition="absolute" // 保持 absolute 定位
            />
        );
    }
);

export default CustomSelect;
